import React,{useState} from 'react'
import { Form, Input, Modal, Select, message,Row ,Col, Button,Upload,TimePicker} from 'antd';
import request from '@/http';
import SecurityService from '@/pages/login/service';
const { Option } = Select;
import { UploadOutlined } from '@ant-design/icons';

interface SeditObject {
    Id?:Int16Array,
    isModalVisible: boolean,
    subjectName?: string,
  }

  const Sedit=(props: { editObject: SeditObject; onClose: any })=> {
    const { editObject, onClose } = props;
    const [isModalVisible, setIsModalVisible] = React.useState(false);
    const [formObject] = Form.useForm();

    const modelOnCancel = () => {
        setIsModalVisible(false);
    };

    const [title, settitle] = useState<
    { key: number; name: string; id: number }[]
  >([]);
  const loadDic = async () => {
    await request
      .get('/api/Topic/GetAll')
      .then((response: any) => {
        if (response.code == 200) {
          const data = response.data.map((item: any, index: number) => ({
            key: item.courseId,
            id: item.id,
            name: item.title,
          }));
          console.log(response)
          settitle(data);
        } else {
          message.error(response.message);
        }
      });
    }

    React.useEffect(() => {
        // console.log(editObject);
        loadDic();
        setIsModalVisible(editObject.isModalVisible);
        formObject.setFieldsValue({
        ...editObject
        });
    }, [editObject]);

    return(
        <>
            <Modal
                width={400}
                title='试卷管理'
                visible={isModalVisible}
                onCancel={modelOnCancel}
                maskClosable={false}
                destroyOnClose
                style={{ top: '20vh' }}
                footer={false}
            >
                <Form name="editForm" preserve={false} form={formObject} onFinish={async(values: any) =>{
                console.log(values);
                if(!editObject.Id){
                    await request.post('/api/Test/AddUsers').then((response:any)=>{
                    if(response.code==200){
                        message.success(response.message);
                        onClose();
                        setIsModalVisible(false);
                    }else{
                        message.success(response.message);
                    }
                    })
                }
                }}>
                <Row gutter={24} justify='center' >
                    <Col span={20} key='1'>
                    <Form.Item
                        label="总分"
                        name="score"
                        rules={[
                        { required: true, whitespace: true, message: '不能为空!' },
                        ]}
                    >
                        <Input placeholder="请录入" />
                    </Form.Item>
                    <Form.Item
                        label="时间"
                        name="times"
                    >
                       <TimePicker/>
                    </Form.Item>
                    <Form.Item
                        label="选择题目"
                        name="title"
                    >
                       <Select placeholder="请选择"
                            mode="tags"
                            optionFilterProp="children"
                            filterOption={(input, option: any) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                            filterSort={(optionA, optionB) =>
                                optionA.userName
                                .toLowerCase()
                                .localeCompare(optionB.userName.toLowerCase())
                            }
                        >
                            {title.map((item) => (
                            <Option value={item.id}>
                                {item.name}
                            </Option>
                            ))}
                        </Select>
                    </Form.Item>
                    </Col>
                    <Col >
                    <Form.Item>
                    <Button
                        style={{marginRight:10}}
                        htmlType='submit'
                        // onClick={}
                    >生成试卷</Button>
                    <Button
                    onClick={modelOnCancel}
                    >取消</Button>
                    </Form.Item>
                    </Col>
                </Row>
                </Form>
            </Modal>
        </>
    )
  }
  export { SeditObject, Sedit };